<template>
  <div id="" class="">
    <span class="goodsitemImg">
      <em :style="{backgroundImage:'url(' + goodspic + ')'}"></em>
    </span>
    <p>商品标题，两行超出省略号隐藏了</p>
    <div class="priceDiv">
      <span>&yen;320</span>
      <span>&yen;929</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    goodspic:require('@/assets/sportsMall/image1.png'),
  })
}
</script>
<style lang="scss" scoped>
.goodsitem{
  color: $lightColor;
  .goodsitemImg{
    padding: 0 8px;
    display: block;
    border-right: 1px solid $boxBgcolor;
    height: 8rem;
    em{
      display: block;
      width: 100%; height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
  p{
    padding: 4px 8px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display:-webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp:2; //显示的行
  }
  .priceDiv{
    padding: 0 8px;
    @include flex;
    justify-content: space-between;
    span{
      text-decoration: line-through;
      &:first-child{
        text-decoration: none;
        color: $redColor;
      }
    }
  }
  &:last-child{
    .goodsitemImg{
      border-right: none;
    }
  }
}
</style>
